import {useState,useEffect} from 'react'
import styles from './rankList.less'
import { Table,Breadcrumb } from 'antd';
import {ISkillRank} from '../../utils/interface'
import {getranklist} from '@/services'
const ranklist=['全部','网站2021A班']
const columns=[ 
    {
        title: '排名',
        dataIndex: 'rangking',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },
    {
        title: '面试记录提交数',
        dataIndex: 'count',
    },
    {
        title: '班级',
        dataIndex: 'className',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    }, 
]
const rankList:React.FC=()=>{
    let [rank,setrank]=useState<ISkillRank[]>([])
    function list(){
        getranklist('interviewRecordRangking').then(res=>{
            if(res.code==200){
                setrank(res.rows)
            }
         })
    }
    function last(){
        getranklist('interviewAnswerRangking').then(res=>{
            if(res.code==200){
                setrank(res.rows)
            }
         })
    }
    return <div className='interviewList'>
      
       <Breadcrumb className={styles.top}>
    <Breadcrumb.Item>面试</Breadcrumb.Item>
    <Breadcrumb.Item>面试排行榜</Breadcrumb.Item>
    </Breadcrumb>
        <section>
            <ul  className={styles.bottom}>
                {
                    ['面试记录榜单'].map((item,index)=>{
                        return <span key={index} onClick={()=>{list()}}>{item}</span>
                    })
                }
                {
                    ['面试提榜单'].map((item,index)=>{
                        return <span key={index} onClick={()=>{last()}}>{item}</span>
                    })
                }
            </ul>
        </section>
         <Table className='table'  rowKey='rangking' dataSource={rank} columns={columns} ></Table>
    </div>
}
export default rankList

